@charset "UTF-8";
$vm_base:375;  //设计图的宽度
@function vw($px) {
  @return ($px / $vm_base) * 100vw;
}
.br{
  border:1px solid red;
}

*{
  margin: 0;
  padding: 0;
}
html {
  height: 100%;

}
body{
  height: 100%;
}
div{
  box-sizing: border-box;
}
li{
  list-style: none;
}
.list{
  display: flex;
  flex-direction:column;
  height: 100%;
  .top{
    width: 100%;
    height: vw(80);
    .ipw{
      width: 100%;
      height: vw(45);
      .ad{
        float: left;
        margin-left: vw(20);
        font-size: vw(14);
        height: vw(45);
        line-height: vw(45);
      }
      .zuo{
        float: left;
        height: 100%;
        line-height: vw(45);
        margin-right: vw(18);
        margin-left: vw(2);
        font-size: vw(12);
        color: #2b2e30;


      }
      .inpw{
        float: left;
        height: vw(30);
        width: vw(230);
        margin-top: vw(6);
        background-color: #f0f3f5;
        .sous{
          height: vw(30);
          line-height: vw(30);
          font-size: vw(18);
          color: #a4a7a9;
          margin-right: vw(6);
          margin-left: vw(10);

        }
        .iupt{
          outline:none;
          border:none;
          background-color: #f0f3f5;
        }

      }
    }
    .xuan{
      margin-top: vw(15);
      height: vw(20);
      width: 100%;
      display: flex;
      justify-content: space-around;

      .x{
        font-size: vw(14);
        color: #787b7d;
      }
      .u{
        font-size: vw(14);
        color: #787b7d;
      }
      .a{
        font-size: vw(14);
        color: #787b7d;
      }
      .n{
        font-size: vw(14);
        color: #787b7d;
      }
    }
  }
  .hide{
    width: 100%;
    height: auto;
    background-color: white;
    z-index: 9;
    position: fixed;
    top: vw(80);
    left: 0;

    .x_hide{
      width: 100%;
      min-height: vw(667);
      background-color: white;
      height: auto;
      z-index: 9;
      div{
        font-size: vw(12);
        margin: vw(5) 0 vw(5) vw(5);
      }
    }
    .u_hide{
      width: 100%;
      min-height: vw(50);
      height: auto;
      z-index: 9;
      div{
        font-size: vw(12);
        margin: vw(5) 0 vw(5) vw(5);
      }
    }
    .a_hide{
      width: 100%;
      min-height: vw(50);
      height: auto;
      z-index: 9;
      div{
        font-size: vw(12);
        margin: vw(5) 0 vw(5) vw(5);
      }
    }
    .n_hide{
      width: 100%;
      min-height: vw(50);
      height: auto;
      z-index: 9;
      div{
        font-size: vw(12);
        margin: vw(5) 0 vw(5) vw(5);
      }
    }
  }
  .list_h{
    height:0;
    flex-grow:1;
    z-index:1;
    overflow:scroll;
    margin-top: vw(15);
    .card{
      width: 100%;
      height: vw(130);
      padding-left: vw(15);
      padding-top: vw(15);
      border-bottom: 1px solid #fafafa;
      .img{
        width: vw(105);
        height: vw(95);
        float: left;
        margin-right: vw(10);
      }
      .info{
        width: vw(230);
        height: vw(95);
        float: left;
        .title{
          height: vw(16);
          font-size: vw(16);
          line-height: vw(16);
          text-align: left;
          color: #4d4d4e;
          font-weight: 600;
          margin-bottom: vw(5);

        }
        .wei{
          height: vw(12);
          font-size: vw(12);
          line-height: vw(12);
          color: #9c9f9f;
          margin-bottom: vw(10);
          .one{
            line-height: vw(12);
          }
          .one:after{
            content: "";
            height: vw(12);
            width: 2px;
            background-color: #dde0e2;
            display: inline-block;
            margin-left: 10px;
            margin-right: 10px;
          }
        }
        .little{
          width: 100%;
          height: vw(16);
          .he{
            display: inline-block;
            height: 100%;
            padding: 0 vw(5);
            font-size: 12px;
            line-height: vw(16);
            text-align: center;
            background-color: #fff7f0;
            margin-right: vw(5);
            color: #d99585;
          }
          span{
            display: inline-block;
            height: 100%;
            padding: 0 vw(5);
            font-size: 12px;
            line-height: vw(16);
            text-align: center;
            background-color: #edf9ff;
            margin-right: vw(5);
            color: #8faeca;

          }

        }
        .money{
          width: 100%;
          height: vw(16);
          margin-top: 15px;
          span{
            display: inline-block;
            height: 100%;
            color: #a84119;
            line-height: vw(16);
          }
          .hx{
            font-size: vw(12);
          }
          span:after{
            content: "";
            height: vw(12);
            width: 2px;
            background-color: #dde0e2;
            display: inline-block;
            margin-left: 10px;
            margin-right: 10px;
          }
          div{
            display: inline-block;
            font-size: vw(12);
            height: 100%;
            color: #a84119;
            line-height: vw(16);
          }
        }
      }
    }
  }
  .footer{
    height: 54px;
    padding: vw(12) vw(43) 0 vw(43);
    .nav{
      .nav_item{
        float: left;
        width: vw(50);
        margin-right: vw(28);
        text-align: center;
        i{
          font-size: vw(21);
          line-height: vw(21);
          color:#8e8e8e;
          text-align: center;
        }
        li{
          margin-top: vw(5);
          text-align: center;
          font-size: vw(8);
          line-height: vw(8);
        }
      }
    }
  }

}